<style type="text/css">
    #progressBar {
        margin : 0px auto;
        height: 22px;
    }
        
    #progressBar div {
        height: 100%;
        color: #fff;
        font-size: 12px;
        line-height: 22px;
    }
    .default {
        border-radius: 4px;
        background: #FFF;
        border: 1px solid #AAA;
        overflow: hidden;			
    }
    .default div {
        background-image: url('<?php echo STATIC_DOMAIN ?>images/admin/pbar-ani.gif');
        border-right: 1px solid #AAA;
        color: black;
        width: 100%;
        text-align: center;
    }
</style>
<div id="step-1" class="portlet grid_12">
    <header>
        <h2>Input Data</h2>
    </header>
    <section>
        <a class="checker" style="padding:3px 6px;margin-bottom: 7px" href="<?php echo STATIC_DOMAIN ?>uploads/files/demo_insert.xls">Tải file demo</a>
        <form id="import" class="form has-validation">
            <div class="clearfix">
                <label for="form-name" class="form-label">Upload file<em>*</em><small>Upload file muốn import</small></label>
                <div class="form-input">
                    <input type="text" id="file-upload" name="file-upload"/>
                    <p class="success" id="file-upload-success" style="display: none">Bạn đã upload thành công file <span style="color: blue;font-weight: bold"></span></p>
                    <input type="hidden" id="file-upload-name" name="file-upload-name"/>
                </div>
            </div>
            
            <div class="clearfix">
                <label for="form-email" class="form-label">Trường sim<small>Ký hiệu trường trong file Excel</small></label>
                <div class="form-input">
                    <select name="field-sim" id="field-sim">
                        <option value="">----</option>
                        <?php 
                        $index = 0;
                        for($i = 65; $i<=90; $i++): ?>
                        <option value="<?php echo $index ?>"><?php echo chr($i) ?></option>
                        <?php 
                        $index++;
                        endfor; ?>
                    </select>
                </div>
            </div>
            
            <div class="clearfix">
                <label for="form-email" class="form-label">Trường nhà mạng<small>Ký hiệu trường trong file Excel</small></label>
                <div class="form-input">
                    <select name="field-netword" id="field-network">
                        <option value="">----</option>
                        <?php 
                        $index = 0;
                        for($i = 65; $i<=90; $i++): ?>
                        <option value="<?php echo $index ?>"><?php echo chr($i) ?></option>
                        <?php 
                        $index++;
                        endfor; ?>
                    </select>
                </div>
            </div>
            <div class="clearfix">
                <label for="form-name" class="form-label">Prefix nhà mạng<small>Bổ từ bố sung</small></label>
                <div class="form-input"><input type="text" id="prefix-network" name="prefix-network"/></div>
            </div>
            <div class="clearfix">
                <label for="form-email" class="form-label">Trường nhóm sim<small>Ký hiệu trường trong file Excel</small></label>
                <div class="form-input">
                    <select name="field-group" id="field-group">
                        <option value="">----</option>
                        <?php 
                        $index = 0;
                        for($i = 65; $i<=90; $i++): ?>
                        <option value="<?php echo $index ?>"><?php echo chr($i) ?></option>
                        <?php 
                        $index++;
                        endfor; ?>
                    </select>
                </div>
            </div>
            <div class="clearfix">
                <label for="form-name" class="form-label">Prefix nhóm sim<small>Bổ từ bố sung</small></label>
                <div class="form-input"><input type="text" id="prefix-group" name="prefix-group"/></div>
            </div>
            <div class="clearfix">
                <label for="form-email" class="form-label">Trường đại lý<small>Ký hiệu trường trong file Excel</small></label>
                <div class="form-input">
                    <select name="field-agent" id="field-agent">
                        <option value="">----</option>
                        <?php 
                        $index = 0;
                        for($i = 65; $i<=90; $i++): ?>
                        <option value="<?php echo $index ?>"><?php echo chr($i) ?></option>
                        <?php 
                        $index++;
                        endfor; ?>
                    </select>
                </div>
            </div>
            <div class="clearfix">
                <label for="form-name" class="form-label">Prefix đại lý<small>Bổ từ bố sung</small></label>
                <div class="form-input"><input type="text" id="prefix-agent" name="prefix-agent"/></div>
            </div>
            <div class="clearfix">
                <label for="form-email" class="form-label">Trường giá<em>*</em><small>Ký hiệu trường trong file Excel</small></label>
                <div class="form-input">
                    <select name="field-price" id="field-price" required="required">
                        <option value="">----</option>
                        <?php 
                        $index = 0;
                        for($i = 65; $i<=90; $i++): ?>
                        <option value="<?php echo $index ?>"><?php echo chr($i) ?></option>
                        <?php 
                        $index++;
                        endfor; ?>
                    </select>
                </div>
            </div>
            <div class="form-action clearfix">
                <input id="submit" class="submit" type="button" name="submit" data-icon-primary="ui-icon-circle-check" value="OK"/>
                <input class="button" type="reset" value="Nhập lại"/>
            </div>
        </form>
    </section>
</div>
<div id="step-2" class="portlet grid_12" style="display: none">
    <header>
        <h2>Tiến trình</h2>
    </header>
     <section>
         <div id="progressBar" class="default"><div>Waiting ... </div></div>
     </section>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        var xhr = null;
        var success = $("#file-upload-success");
        $("#file-upload").uploadify({
            'buttonText'    : 'Chọn File',
            'height'        : 30,
            'fileTypeDesc'  : 'Excel Document Files',
            'fileTypeExts'  : '*.xls; *.xlsx',
            'swf'           : base_url + 'js/admin/uploadify/uploadify.swf',
            'uploader'      : '<?php echo site_url('admin/variation/upload') ?>',
            'width'         : 120,
            'onUploadSuccess' : function(file, data, response) {
                data = $.parseJSON(data);
                if(data.error != '') {
                    alert(data.error);
                } else {
                    success.find('span').html(data.filename);
                    success.show();
                    $("#file-upload-name").val(data.filename);
                }
            },
            'onUploadError' : function(file, errorCode, errorMsg, errorString) {
                alert("Có lỗi xảy ra, vui lòng thử lại!");
            },
            'onUploadStart' : function(file) {
                success.hide();
            }
        }); 
        $("#submit").unbind('click');
        $("#submit").click(function() {
            var fileName = $("#file-upload-name").val(),
                fieldNetwork = $("#field-network").val(),
                fieldGroup = $("#field-group").val(),
                fieldAgent = $("#field-agent").val(),
                fieldPrice = $("#field-price").val(),
                fieldSim = $("#field-sim").val(),
                prefixNetwork = $("#prefix-network").val(),
                prefixGroup = $("#prefix-group").val(),
                prefixAgent = $("#prefix-agent").val(),
                param ="fieldSim=" + fieldSim + "&fileName=" + fileName + "&fieldNetwork=" + fieldNetwork + "&fieldGroup=" + fieldGroup + "&fieldAgent=" + fieldAgent + "&fieldPrice=" + fieldPrice + "&prefixNetwork=" + prefixNetwork + "&prefixGroup=" + prefixGroup + "&prefixAgent=" + fieldAgent;
            if(fileName == '' && fieldPrice == '') {
                alert("Bạn cần upload file và chọn trường giá!");
                return false;
            } 
            $("#step-1").fadeOut();
            $("#step-2").fadeIn();
            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            } else {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.onreadystatechange=function() {
                if (xhr.readyState==4 && xhr.status==200) {
                    //Callback when ajax success
                    var res = xhr.responseText,
                        regex = /(\{.+\})/g,
                        match = regex.exec(res);
                    res = match[0];
                    res = $.parseJSON(res);
                    if(res.success == 1) {
                        var str = 'Bạn đã cập nhật thành công : \n' +
                                    res.sim + ' sim, \n'+
                                    res.group + ' nhóm sim, \n' +
                                    res.network + ' nhà mạng, \n' +
                                    res.agent + ' đại lý.';
                        if(confirm(str)) {
                            window.location = '<?php echo site_url('admin/variation') ?>';
                        } else {
                            window.location = '<?php echo site_url('admin/variation/import') ?>';
                        }
                    } else {
                        if(confirm('Có lỗi xảy ra vui lòng thực hiện lại!')) {
                            window.location = '<?php echo site_url('admin/variation/import') ?>';
                        } else {
                            window.location = '<?php echo site_url('admin/variation') ?>';
                        }
                    }
                }
            }
            xhr.open("GET",base_url + "admin/variation/importAjax?" + param,true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send();
            return false;
        });
    });
    
    function progressBar(percent, $element) {
        var progressBarWidth = percent * $element.width() / 100;
        $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;");
    }
</script>